<template>
    <div class="my-modal cmp">
        modal component

        <section class="test">
            innerDataRef: {{ innerDataRef }}
        </section>

        <section class="test">
            <MyButton @click="mlog('my click')" type="primary" color="blue"></MyButton>
        </section>

        <section class="test">
            <YouButton @click="mlog('you click')" type="warning" color="yellow"></YouButton>
        </section>
    </div>
</template>

<script setup lang="ts">
import useClog from '@/hooks/useClog';
import { onRenderTracked, onRenderTriggered, reactive, toRef } from 'vue';
import MyButton from './MyButton';
import YouButton from './YouButton';

const mlog = useClog('MyModal')

const props = defineProps({
    title: String,
    visible: Boolean,
    data: Array
})

mlog('props:', props)
mlog('titleRef 被解包传入组件内:', props.title)
mlog('dataRef 被解包传入组件内:', props.data)

const innerDataRef = toRef(props, 'data')
innerDataRef.value?.push({name: 'zoro', age: 13})

// 包lint错误:  vue/no-setup-props-destructure
// eslint-disable-next-line vue/no-setup-props-destructure
const data = props.data
mlog('props.data 复制给data变量:', data)
data?.push({name: 'franky', age: 13})

// reactive(reactiveObj) => sameReactiveObj
const sameData = reactive(props.data ? props.data : [])
mlog('sameData === props.data', sameData === props.data)


// 响应式调试，跟踪了哪些依赖；哪些依赖触发了更新 onRenderTracked() onRenderTriggered()
onRenderTracked(event => {
    mlog('onRenderTracked:', event)
})

onRenderTriggered(event => {
    mlog('onRenderTriggered:', event)
})

</script>